<template>
	<view class="header">
		<view>
			<image class="icon" src="@/static/logo.png"></image>
		</view>
		<view style="display: flex;justify-content: space-between;margin:-40rpx 20rpx 0 20rpx;color:white;">
			<view>
				<text class="test">&#xe607;</text>
				<text>农贸批发</text>
			</view>
			<view>
				<text class="test">&#xe607;</text>
				<text>产地货源</text>
			</view>
			<view>
				<text class="test">&#xe607;</text>
				<text>买家保障</text>
			</view>
		</view>
		<view class="search">
			<input v-model="kw" type="text" />
			<text @click="search" class="test search_icon">&#xe86e;</text>
		</view>
	</view>

</template>

<script>
	export default {
		name: "common-header",
		data() {
			return {
				kw:''
			};
		},
		methods:{
			search(){
				this.$emit('search',this.kw)
			}
		}
	}
</script>

<style>	
	@font-face {
	  font-family: 'iconfont';  /* Project id 2780452 */
	  src: url('//at.alicdn.com/t/font_2780452_lwrknsxgrcl.woff2?t=1630918241596') format('woff2'),
	       url('//at.alicdn.com/t/font_2780452_lwrknsxgrcl.woff?t=1630918241596') format('woff'),
	       url('//at.alicdn.com/t/font_2780452_lwrknsxgrcl.ttf?t=1630918241596') format('truetype');
	}

	.test {
		font-family: iconfont;
		color: red;
	}

	.icon {
		height: 60rpx;
		width: 60rpx;
		margin: 60rpx 60rpx;
		background-color: #39bf3e;
	}

	.header {
		position: sticky;
		width: 100vw;
		height: 200rpx;
		background-color: #39bf3e;
		top: 0rpx;
		z-index: 9999;
		margin-bottom: 10rpx;
	}
	.search{
		height: 90rpx;
		background-color: #39bf3e;
		display: flex;
		align-items: center;
	}
	.search input{
		height: 60rpx;
		border: 1rpx solid white;
		border-radius: 10rpx;
		color: white;
		font-size: 14px;
		font-weight: 400;
		position: relative;
		width: 100%;
		margin: 10rpx 20rpx;
		box-sizing: content-box;
	}
	.search_icon{
		box-sizing: content-box;
		position: absolute;
		right: -10rpx;
		bottom: -60rpx;
		width: 20%;
		height: 60rpx;
		margin: -10rpx 40rpx;
		text-align: center;
		font-size: 1.8rem;
		display: block;
	}
</style>
